<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/list-to-detail.css" />
		<style>
			[v-cloak] {
				display: none;
			}
			
			html,
			body {
				height: 100%;
				background: #FFFFFF;
			}
			
			.mui-bar-nav {
				background: #f16456;
				height: 58px;
			}
			
			.mui-bar .mui-title {
				margin-top: 18px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 58px;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF;
				margin-top: 17px;
			}
			
			.kr-article-content {
				background: #ffffff;
				padding-top: 5px;
			}
			
			.kr-article-article a {
				word-break: break-word;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">游戏玩法</h1>
		</header>
		<div class="mui-content" id="bizVue">
			<div class="kr-article-content">
				<div class="kr-article-article" v-html="howToPlay"></div>
			</div>
		</div>

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#bizVue',
				data: {
					howToPlay: "",
				},
				mounted: function() {
					mui.plusReady(function() {
						swipeBack();
						vm.howToPlay = plus.storage.getItem("howToPlay");
					});
				}
			});
		</script>
	</body>

</html>